<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>DndUpload</title>
	<style type="text/css">
		#ct{ 
			border:1px solid #999;
			-webkit-border-radius:15px;
			-moz-border-radius:15px;
			border-radius:15px;
			width:600px; 
			height:120px;
		}
		.shadow-ct{
			border:1px solid #666;
			box-shadow:5px 5px 3px #ccc;
			background:#FCFAE9;
		}
	</style>
</head>
<body>
	<h2>Drop Zone</h2>
	<div id="ct"></div>
		
	<script type="text/javascript">
		if( !window.FileReader ){
			document.body.innerHTML = "Browser is not supported";
		}
		
		objCt = document.getElementById("ct");
		
		function dragenterHandler(e){
			this.setAttribute("class","shadow-ct");
		}
		
		function dragoverHandler(e){
			e.stopPropagation();
			e.preventDefault();
		}
		
		function dropHandler(e){
			e.stopPropagation();
			e.preventDefault();
			var files = e.dataTransfer.files; 
			var fr = new FileReader();
			
			var xhr = null;
			if (window.XMLHttpRequest){
				xhr=new XMLHttpRequest();
			}else if (window.ActiveXObject){
				xhr=new ActiveXObject("Microsoft.XMLHTTP");
			}
			
			for (var i = 0, f; f = files[i]; i++) {
				tmp_file = f;
				ext = getExt(tmp_file.name);
				alert(tmp_file.type);
				fr.onloadend = function(){
					if( xhr ){
						var url = "http://localhost/work/veapon-com/dndupload/upload.php?ext="+ext;
						xhr.open("POST",url,true);
						xhr.overrideMimeType("application/octet-stream");
						if(!XMLHttpRequest.prototype.sendAsBinary){
						  XMLHttpRequest.prototype.sendAsBinary = function(datastr) {
							function byteValue(x) {
							  return x.charCodeAt(0) & 0xff;
							}
							var ords = Array.prototype.map.call(datastr, byteValue);
							var ui8a = new Uint8Array(ords);
							this.send(ui8a.buffer);
						  }
						}
						
						xhr.sendAsBinary(fr.result);
						
						xhr.onreadystatechange = function(){
							alert(xhr.state);
							if( xhr.readyState==4 && xhr.status==200 ){
								var reg = /^image/;
								if( reg.exec(tmp_file.type) ){
									var html = '<p><img src="'+xhr.responseText+'" title="'+tmp_file.name+'" /></p>';
									document.getElementById("file_list").innerHTML += html;
								}else{
									document.getElementById("file_list").innerHTML += '<p>'+xhr.responseText+'</p>';
								}
							}
						}				
					}
				}
				fr.readAsBinaryString(f);
			}	
			
			this.setAttribute("class","no-class");		
			//
		}
		
		function getExt(file){
			var ext;
			if( file=="" ){
				ext = "unknown";
			}
			var arr = file.split('.');
			var str = arr[arr.length-1];
			if( str=="" || str=="undefined" ){
				ext = "unknown";
			}else{
				ext = str;
			}
			return ext;
		}
						
		objCt.addEventListener('dragenter',dragenterHandler,false);
		objCt.addEventListener('dragover',dragoverHandler,false);
		objCt.addEventListener('drop',dropHandler,false);
	</script>
	<hr>
	<h2>File List:</h2>
	<div id="file-list">
	</div>
</body>
</html>
